<html>

<head>
    <title>Simple client</title>
    <style>
        #main {
            display: grid;
            grid-template-columns: repeat(8, 100px);
            grid-template-rows: repeat(4, 100px);
            background-color: #ddd;
            width: 800px;
            height: 400px;
            margin: auto;
        }

        .free {
            opacity: 40%;
        }

        .free.highlight {
            opacity: 80%;
        }

        .belongs-to-0 {
            background-color: cadetblue !important;
            border: 10px solid #ddd;
            font-size: 20px;
            text-align: center;
            display: flex;
            align-items: center;
        }

        .belongs-to-1 {
            background-color: blueviolet !important;
            border: 10px solid #ddd;
            font-size: 20px;
            text-align: center;
            display: flex;
            align-items: center;
        }

        div p {
            margin: auto;
            text-align: center;
        }

        .c_button_upload {
            margin: auto;
            margin-top: 30px;
            text-align: center;
        }
    </style>
</head>

<body>

    <div id="main">
        <div class="belongs-to-0" id="tile00" onclick="click_listener(0, 0);" style="grid-column: 1;grid-row: 1;"></div>
        <div class="belongs-to-0" id="tile01" onclick="click_listener(0, 1);" style="grid-column: 1;grid-row: 2;"></div>
        <div class="belongs-to-0" id="tile02" onclick="click_listener(0, 2);" style="grid-column: 1;grid-row: 3;"></div>
        <div class="belongs-to-0" id="tile03" onclick="click_listener(0, 3);" style="grid-column: 1;grid-row: 4;"></div>
        <div class="belongs-to-0" id="tile10" onclick="click_listener(1, 0);" style="grid-column: 2;grid-row: 1;"></div>
        <div class="belongs-to-0" id="tile11" onclick="click_listener(1, 1);" style="grid-column: 2;grid-row: 2;"></div>
        <div class="belongs-to-0" id="tile12" onclick="click_listener(1, 2);" style="grid-column: 2;grid-row: 3;"></div>
        <div class="belongs-to-0" id="tile13" onclick="click_listener(1, 3);" style="grid-column: 2;grid-row: 4;"></div>
        <div class="belongs-to-0" id="tile20" onclick="click_listener(2, 0);" style="grid-column: 3;grid-row: 1;"></div>
        <div class="belongs-to-0" id="tile21" onclick="click_listener(2, 1);" style="grid-column: 3;grid-row: 2;"></div>
        <div class="belongs-to-0" id="tile22" onclick="click_listener(2, 2);" style="grid-column: 3;grid-row: 3;"></div>
        <div class="belongs-to-0" id="tile23" onclick="click_listener(2, 3);" style="grid-column: 3;grid-row: 4;"></div>
        <div class="belongs-to-0" id="tile30" onclick="click_listener(3, 0);" style="grid-column: 4;grid-row: 1;"></div>
        <div class="belongs-to-0" id="tile31" onclick="click_listener(3, 1);" style="grid-column: 4;grid-row: 2;"></div>
        <div class="belongs-to-0" id="tile32" onclick="click_listener(3, 2);" style="grid-column: 4;grid-row: 3;"></div>
        <div class="belongs-to-0" id="tile33" onclick="click_listener(3, 3);" style="grid-column: 4;grid-row: 4;"></div>
        <div class="belongs-to-1" id="tile40" onclick="click_listener(4, 0);" style="grid-column: 5;grid-row: 1;"></div>
        <div class="belongs-to-1" id="tile41" onclick="click_listener(4, 1);" style="grid-column: 5;grid-row: 2;"></div>
        <div class="belongs-to-1" id="tile42" onclick="click_listener(4, 2);" style="grid-column: 5;grid-row: 3;"></div>
        <div class="belongs-to-1" id="tile43" onclick="click_listener(4, 3);" style="grid-column: 5;grid-row: 4;"></div>
        <div class="belongs-to-1" id="tile50" onclick="click_listener(5, 0);" style="grid-column: 6;grid-row: 1;"></div>
        <div class="belongs-to-1" id="tile51" onclick="click_listener(5, 1);" style="grid-column: 6;grid-row: 2;"></div>
        <div class="belongs-to-1" id="tile52" onclick="click_listener(5, 2);" style="grid-column: 6;grid-row: 3;"></div>
        <div class="belongs-to-1" id="tile53" onclick="click_listener(5, 3);" style="grid-column: 6;grid-row: 4;"></div>
        <div class="belongs-to-1" id="tile60" onclick="click_listener(6, 0);" style="grid-column: 7;grid-row: 1;"></div>
        <div class="belongs-to-1" id="tile61" onclick="click_listener(6, 1);" style="grid-column: 7;grid-row: 2;"></div>
        <div class="belongs-to-1" id="tile62" onclick="click_listener(6, 2);" style="grid-column: 7;grid-row: 3;"></div>
        <div class="belongs-to-1" id="tile63" onclick="click_listener(6, 3);" style="grid-column: 7;grid-row: 4;"></div>
        <div class="belongs-to-1" id="tile70" onclick="click_listener(7, 0);" style="grid-column: 8;grid-row: 1;"></div>
        <div class="belongs-to-1" id="tile71" onclick="click_listener(7, 1);" style="grid-column: 8;grid-row: 2;"></div>
        <div class="belongs-to-1" id="tile72" onclick="click_listener(7, 2);" style="grid-column: 8;grid-row: 3;"></div>
        <div class="belongs-to-1" id="tile73" onclick="click_listener(7, 3);" style="grid-column: 8;grid-row: 4;"></div>
    </div>
    <div id="round" style="text-align: center;"></div>
    <div id="comment"> </div>
    <div id="log"></div>
    <script src="./human.js"></script>
    <script>

        var ws;

        function init() {

            // Connect to Web Socket
            ws = new WebSocket("ws://localhost:9001/");

            // Set event handlers.
            ws.onopen = function () {
                output("onopen");
            };

            ws.onmessage = function (e) {
                output("onmessage: " + e.data);
                if (JSON.parse(e.data).is_first != undefined) {
                    is_first = JSON.parse(e.data).is_first;
                }
                output("onmessage: " + e.data);
                board_obj = JSON.parse(e.data);
                setTimeout("render(board_obj)", 500);
            };

            ws.onclose = function () {
                output("onclose");
            };

            ws.onerror = function (e) {
                output("onerror");
                console.log(e)
            };

        }

        function output(str) {
            var log = document.getElementById("log");
            var escaped = str.replace(/&/, "&amp;").replace(/</, "&lt;").
                replace(/>/, "&gt;").replace(/"/, "&quot;"); // "
            log.innerHTML = escaped + "<br>" + log.innerHTML;
        }

        init();

    </script>
</body>

</html>
